<li local-class='translation-item {{if @isFocused "focused"}} {{if this.error "errored"}} {{if this.conflictResolved "resolved"}}'>
  <div local-class='item-details' data-dir={{if this.revisionTextDirRtl 'rtl'}}>
    <div local-class='item-details__column'>
      {{#if this.error}}
        <div local-class='error'>
          {{t 'components.translation_item.correct_error_text'}}
        </div>
      {{/if}}
    </div>
    <div local-class='item-details__column'>
      <div local-class='textInput'>
        <TranslationEdit::Form
          @permissions={{@permissions}}
          @borderless={{true}}
          @projectId={{@project.id}}
          @translationId={{@translation.id}}
          @translationKey={{@translation.key}}
          @lintMessages={{@translation.lintMessages}}
          @valueType={{@translation.valueType}}
          @value={{this.textInput}}
          @inputDisabled={{this.inputDisabled}}
          @showTypeHints={{false}}
          @onKeyUp={{fn this.changeTranslationText}}
          @onSubmit={{fn this.correctConflict}}
          @onFocus={{@onFocus}}
          @onBlur={{@onBlur}}
          @rtl={{this.revisionTextDirRtl}}
          lang={{this.revisionSlug}}
          as |form|
        >
          {{#component form.submit}}
            <div local-class='button-submit' data-dir={{form.dir}}>
              {{#if this.showOriginalButton}}
                <AsyncButton @onClick={{fn this.setOriginalText}} local-class='revert-button' class='button button--iconOnly button--white'>
                  {{inline-svg '/assets/revert.svg' class='button-icon'}}
                </AsyncButton>
              {{/if}}

              <div local-class='form-helpers'>
                <TranslationEdit::Helpers
                  @permissions={{@permissions}}
                  @project={{@project}}
                  @languageSlug={{this.revisionSlug}}
                  @prompts={{@prompts}}
                  @rtl={{this.revisionTextDirRtl}}
                  @text={{this.textInput}}
                  @onUpdatingText={{fn this.onUpdatingText}}
                  @onUpdateText={{fn this.onUpdateText}}
                />
              </div>

              {{#if @translation.isConflicted}}
                {{#if (get @permissions 'correct_translation')}}
                  <AsyncButton @loading={{this.isCorrectLoading}} class='button button--iconOnly button--borderLess button--green' @onClick={{fn this.correctConflict}}>
                    {{inline-svg '/assets/check.svg' class='button-icon'}}
                  </AsyncButton>
                {{else if (get @permissions 'update_translation')}}
                  <AsyncButton @loading={{this.isUpdateLoading}} tabindex='-1' class='button button--borderLess button--iconOnly button--grey' @onClick={{fn this.updateConflict}}>
                    {{inline-svg '/assets/pencil.svg' class='button-icon'}}
                  </AsyncButton>
                {{/if}}
              {{else}}
                {{#if (get @permissions 'uncorrect_translation')}}
                  <AsyncButton @loading={{this.isUncorrectLoading}} class='button button--borderLess button--iconOnly button--red' @onClick={{fn this.uncorrectConflict}}>
                    {{inline-svg '/assets/revert.svg' class='button-icon'}}
                  </AsyncButton>
                {{else if (get @permissions 'update_translation')}}
                  <AsyncButton @loading={{this.isUpdateLoading}} tabindex='-1' class='button button--borderLess button--iconOnly button--grey' @onClick={{fn this.updateConflict}}>
                    {{inline-svg '/assets/pencil.svg' class='button-icon'}}
                  </AsyncButton>
                {{/if}}
              {{/if}}
            </div>
          {{/component}}
        </TranslationEdit::Form>
      </div>
    </div>
  </div>
</li>